<template>
    <div class="about-me">
        <div class="top">
            <div class="header">
                <div class="continer">
                    <van-row
                        class="company"
                        justify="space-between">
                        <van-col>
                            <wp-icon
                                name="company"
                                size="14" />
                            {{ personal_state.userinfo && personal_state.userinfo.company }}
                        </van-col>
                        <van-col  >
                            <wp-avator
                                :username="personal_state.userinfo && personal_state.userinfo.username || '' "
                                :size="60" />
                        </van-col>
                    </van-row>
                    <div class="userName">
                        {{ personal_state.userinfo && personal_state.userinfo.username }}
                    </div>
                    <div class="status">
                        {{ member_status_text }}
                    </div>
                </div>
            </div>
            <div class="buttons">
                <van-grid class="mine-actions">
                    <van-grid-item
                        :badge="message_number"
                        :text="$st('wp_messages')"
                        @click="goto('MessageList')">
                        <template #icon>
                            <van-image
                                fit="contain"
                                width="32"
                                height="32"
                                :src="imageList[0]" />
                        </template>
                    </van-grid-item>
                    <van-grid-item
                        :text="$st('wp_New_Repair_Request')"
                        @click="goto('createrepairorder')">
                        <template #icon>
                            <van-image
                                fit="contain"
                                width="32"
                                height="32"
                                :src="imageList[1]" />
                        </template>
                    </van-grid-item>
                    <van-grid-item
                        :text="$st('wp_Inquiry_repair_requests')"
                        @click="goto('repairorderquery')">
                        <template #icon>
                            <van-image
                                fit="contain"
                                width="32"
                                height="32"
                                :src="imageList[2]" />
                        </template>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>
        <div class="summary">
            <div class="title">
                {{$st('wp_My_Order')}}
            </div>
            <van-row>
                <van-col
                    v-for="item in summaryItems"
                    :key="item.key"
                    span="6">
                    <div
                        class="item"
                        @click="viewMyOrder(item)">
                        <span class="count">{{ personal_state.user_repair_data[item.key] }}</span>
                        <span class="name">{{ item.label }}</span>
                    </div>
                </van-col>
            </van-row>
        </div>
        <div class="logout">
            <van-button
                @click="clickLogout"
                block>
                {{$st('wp_Logout')}}
            </van-button>
        </div>
        <div style="height:60px"/>
    </div>
</template>
<script>
import { onMounted, ref } from 'vue';
import { usePersonalSetup } from '@/setup/personalcenter/PersonalSetup';
import { useRouter } from 'vue-router';
import WpAvator from '../_wp_components/WpAvator.vue';
import { showConfirm } from '@/util/MessageDeal';
import { useStore } from 'vuex';
import { selfI18n } from '@/i18n/index';
export default {
    name: 'PersonalCenter',
    components: { WpAvator },
    setup () {
        const {
            getUserInfo, getMyRepairOrderInfo, logout, personal_state,
            getMemberStatus, member_status_text, message_number, getPersonalRepairPerformance
        } = usePersonalSetup();
        const $st = selfI18n;
        const imageList = ref([
            require('@/assets/icon_32_news@2x.png'),
            require('@/assets/icon_32_repair@2x.png'),
            require('@/assets/icon_32_query@2x.png'),
            require('@/assets/icon_32_history@2x.png')
        ]);

        const summaryItems = ref([
            {
                key: 'processedrepairnumber',
                label: $st('wp_Processed_RR_totally'),
                value: ''
            },
            {
                key: 'todayprocessedrepairnumber',
                label: $st('wp_Processed_RR_today'),
                value: ''
            },
            {
                key: 'weekprocessedrepairnumber',
                label: $st('wp_Processed_RR_this_week'),
                value: ''
            },
            {
                key: 'monthprocessedrepairnumber',
                label: $st('wp_Processed_RR_this_month'),
                value: ''
            },
            // ----绩效-----
            {
                key: 'numberofrepairscompletedthismonth',
                label: $st('wp_Completed_RR_this_month'),
                value: ''
            },
            {
                key: 'numberofrepairscompletedlastmonth',
                label: $st('wp_Completed_RR_last_month'),
                value: ''
            },
            {
                key: 'ratingthismonth',
                label: $st('wp_Evaluated_this_month'),
                value: ''
            },
            {
                key: 'ratinglastmonth',
                label: $st('wp_Evaluated_last_month'),
                value: ''
            },
            // -------------

            {
                key: 'repairinprocessnumber',
                label: $st('wp_Processing'),
                value: ''
            },
            {
                key: 'beevaluatedrepairnumber',
                label: $st('wp_Be_evaluation'),
                value: ''
            },
            {
                key: 'completedrepairnumber',
                label: $st('wp_Completed'),
                value: ''
            }, {}
        ]);
        const router = useRouter();

        const viewMyOrder = (item) => {
            // router.push({
            //     name: 'myorders',
            //     query: {
            //         item
            //     }
            // });
        };

        const goto = (path) => {
            router.push({
                name: path
            });
        };

        const clickLogout = () => {
            showConfirm('确定退出登录?', logout);
        };
        const store = useStore();
        onMounted(() => {
            store.dispatch('getSystemMessagePreview');
            getUserInfo();
            getMyRepairOrderInfo();
            getMemberStatus();
            getPersonalRepairPerformance();
        });
        return {
            clickLogout,
            imageList,
            message_number,
            personal_state,
            member_status_text,
            summaryItems,
            viewMyOrder,
            goto
        };
    }
};
</script>
<style lang="scss">
.about-me{
    background: #f0f0f0;

    .top{
        padding: 20px 15px 0 15px;
        background: linear-gradient(180deg,#3875c6, rgba(56,117,198,0.50), rgba(56,117,198,0.00));
        .header{
            border-radius: 5px;
            height: 170px;
            background: white;
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
            .continer{
                padding: 20px 20px 20px 15px;
                .company{
                    font-size: 14px;
                    margin-bottom: 22px;
                }
                .avatar{
                    height: 60px;
                    width: 60px;
                    border-radius: 6px;
                    // border: 1px solid #f0f0f0;
                    line-height: 60px;
                    text-align: center;
                    // font-size: 20px;
                }
                .userName{
                    font-size: 22px;
                    padding-top: 2px;
                }
                .status{
                    font-size: 13px;
                    color: rgba(0,0,0,0.60);
                }
            }
        }
        .buttons{
            height: 86px;
            margin: 10px auto;
            border-radius: 5px;
            box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
            overflow: auto;
        }
    }
    .mine-actions{
        background: #fff;
        .van-grid-item__content::after{
            border: none;
        }
    }
    .summary{
        margin: 0 15px;
        border-radius: 5px;
        background: white;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.05);
        overflow: auto;
        .title{
             font-size: 15px;
             box-sizing: border-box;
             height: 44px;
             line-height: 44px;
             padding: 0 15px;
         }
        .van-col{
            border-top: 1px solid rgba(0,0,0,0.05);
        }
        .item{
            padding: 16px 0 15px 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            .count{
                font-size: 20px;
            }
            .name{
                font-size: 13px;
                color: rgba(0,0,0,0.60);
            }
            &:active{
                background-color: var(--van-cell-active-color);
            }
        }
    }
    .logout{
        color:rgba(0,0,0,0.4);
        margin: 20px 15px 0 15px;
        .van-button{
            border-radius: 4px;
            font-size: 17px;
        }
    }
}
</style>
